<template>
  <div class="collection">
    <div class="title">
      <svg
        @click="$router.back()"
        t="1671798247143"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2281"
        width="200"
        height="200"
      >
        <path
          d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z"
          p-id="2282"
        ></path>
        <path
          d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
          p-id="2283"
        ></path>
      </svg>
      <span>我的收藏</span>
      <span></span>
    </div>
    <ul class="goods" v-if="myCollection">
      <li
        v-for="good in myCollection"
        :key="good.followId"
        @click="
          $router.push({
            path: '/product',
            query: { goodsId: good.goodsId, productId: good.productId },
          })
        "
      >
        <img :src="good.productImage" alt="" />

        <div class="right">
          <p>{{ good.goodsName }}</p>
          <span>￥{{ good.productPrice }}</span>
        </div>
      </li>
    </ul>
    <p>数据加载完毕~</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myCollection: null,
      token: null,
    };
  },
  async created() {
    this.token = localStorage.getItem("fastCar-token");
    let res = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/followProduct/list?pageSize=10&current=1",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
    this.myCollection = res.data.data.list;
  },
};
</script>

<style lang="scss" scoped>
.collection {
  width: 100vw;
  height: 100vh;
  background-color: rgb(245, 245, 245);
  .title {
    display: flex;
    justify-content: space-between;
    padding: 10rem;
    background-color: #fff;
    margin-bottom: 10rem;
    svg {
      width: 25rem;
      height: 25rem;
    }
    span {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
    }
  }
  ul.goods {
    padding: 10rem;
    background-color: #fff;
    li {
      display: flex;
      margin-bottom: 10rem;

      img {
        box-sizing: border-box;
        margin-right: 10rem;
        width: 145rem;
        height: 145rem;
        border-radius: 10rem;
        // display: flex;
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p {
          font-size: 15rem;
          color: #2d2d2d;
        }
        span {
          font-size: 15rem;
          color: #fc1c1c;
        }
      }
    }
  }

  > P {
    display: flex;
    justify-content: center;
    margin-top: 15rem;
    color: #bbb;
  }
}
</style>